<template>
  <div>
    <el-dialog :title="this.dialogTitle" :visible.sync="dialogVisible" width="90%" :close-on-click-modal="false">
      <wl-search size="medium" :isVertical="true" :hideBtn="3" @submit="handleFilter" @reset="handleReset">
        <el-form :model="listQuery" ref="listQuery" size="medium" label-width="120px" class="sample-form">
          <template v-if="this.isPurchaseOrder == '2'">
            <el-col :span="7">
              <el-form-item label="销售订单名称" prop="orderName">
                <el-input v-model="listQuery.orderName" placeholder="请输入销售订单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="销售订单编码" prop="orderCode">
                <el-input v-model="listQuery.orderCode" placeholder="请输入销售订单编码"></el-input>
              </el-form-item>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="7">
              <el-form-item label="采购订单名称" prop="orderName">
                <el-input v-model="listQuery.orderName" placeholder="请输入采购订单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="采购订单编码" prop="orderCode">
                <el-input v-model="listQuery.orderCode" placeholder="请输入采购订单编码"></el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="7">
            <el-form-item label="客商" prop="providerName">
              <el-input v-model="listQuery.providerName" placeholder="请输入客商"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单类型" prop="certificateType">
              <el-select v-model="listQuery.certificateType" placeholder="请选择订单类型" clearable>
                <el-option v-for="item in bizCodeList.certificateType" :key="item.id" :label="item.name"
                           :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单创建时间">
              <wlHistoryDateSelect :valueDate="time" @getHistoryDate="getHistoryDate" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单创建人" prop="creatorName">
              <el-input clearable v-model="listQuery.creatorName" placeholder="请输入订单创建人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单创建部门" prop="deptName">
              <el-input clearable v-model="listQuery.deptName" placeholder="请输入订单创建部门"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </wl-search>

      <el-table border max-height="520" :data="tableData" v-loading="tableLoading" stripe>
        <el-table-column width="50" label="选择">
          <template slot-scope="scope">
            <div class="radioDiv">
              <el-radio v-model="isCheck" :label="scope.row"> </el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" width="50" label="序号" />
        <template v-if="this.isPurchaseOrder == '2'">
          <el-table-column prop="orderName" label="销售订单名称" show-overflow-tooltip />
          <el-table-column prop="orderCode" label="销售订单编码" width="150" />
          <el-table-column prop="certificateType" label="销售订单类型">
            <template slot-scope="scope">
              {{$util.bizCodeFormat(bizCodeList, "certificateType",scope.row.certificateType)}}
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column prop="orderName" label="采购订单名称" show-overflow-tooltip />
          <el-table-column prop="orderCode" label="采购订单编码" width="150" />
          <el-table-column prop="certificateType" label="采购订单类型">
            <template slot-scope="scope">
              {{$util.bizCodeFormat(bizCodeList, "certificateType",scope.row.certificateType)}}
            </template>
          </el-table-column>
        </template>
        <el-table-column prop="providerName" label="客商" show-overflow-tooltip />
        <el-table-column prop="createTime" width="120" label="订单创建时间">
          <template slot-scope="scope">
            {{$util.formatDateByMoment(scope.row.createTime)}}
          </template>
        </el-table-column>
        <!-- v-if="this.isPurchaseOrder != '2'"  2023-5-1现销售订单、采购订单都显示该字段 -->
        <el-table-column prop="orderSumAmount" label="订单总金额（含税）" width="130">
        </el-table-column>
        <el-table-column prop="creatorName" label="订单创建人" width="100" />
        <el-table-column prop="deptName" label="订单创建部门" show-overflow-tooltip />

      </el-table>
      <wl-pagination :total="total" :current-page.sync="listQuery.pageNum" :page-size.sync="listQuery.pageSize"
                     @paginationChange="getTable" />

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import {listFaults} from "@/api/system/faults";

export default {
  data() {
    return {
      time: [],
      bizCodeList: {},
      isCheck: "",
      dialogVisible: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        orderName: "",
        orderCode: "",
        isPurchaseOrder: "", //类型
      },
      total: 0,
      options: [],
      tableData: [],
      tableLoading: true,
    };
  },
  components: {},
  props: {
    // isPurchaseOrder 1-物资 2-销售
    isPurchaseOrder: {
      type: Number,
      default: 0,
    },
    dialogTitle: {
      type: String,
      default: "",
    }
  },
  mounted() { },
  created() {

  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {
        this.isCheck = null
        this.$nextTick(() => {
          this.handleReset();
        })
      }
    },
  },
  methods: {
    //获取表格数据
    async getTable() {
      this.tableLoading = true;
      listFaults(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.tableLoading = false;
      });
    },
    //提交
    submit() {
      const infoObj = this.isCheck;
      console.log(infoObj);
      this.$emit("getInfo", infoObj);
      this.dialogVisible = false;
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getTable();
    },
    handleReset() {
      this.$refs.listQuery.resetFields();
      this.handleFilter();
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    getHistoryDate(data) {
      this.time = data
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .wl-search-content {
  margin-top: 0;
}
.radioDiv ::v-deep.el-radio__label {
  display: none;
}
</style>
